<style scoped lang="scss" type="text/scss">
  @import '~variables';

  .banner-img{
    width: 100%;
    height: 350px;
  }
  .ivu-carousel-dots li button.radius{
    width: 20px;
    height: 20px;
  }
  .book-img{
    width: 114px;
    height: 160px;
  }
  .rank-img{
    width: 74px;
    height: 104px;
  }
  .top{
    background: #f8f8f8;
  }
  .sub-center{
    left: -5px;
    border-left: 0 none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .my-book{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .mint-swipe{
    height: 150px;
  }
  .mint-cell {
    &.cell-title {
      /deep/ .mint-cell-text {
        font-size: 18px;
        font-weight: bold;
        color: #ED6460;
      }
    }
    /deep/ .mint-cell-text{
      font-size: $m ;
    }
  }
  .content{
    &:last-child{
      border-bottom: 0 none;
    }
  }
  .first-img{
    width: 75px;
    height: 105px;
    float: left;
  }
</style>

<template>
  <div>
    <v-header :tabList="tabList" @changeTab="changeTab"></v-header>

    <div class="pc-style">
      <div class="padding-top main-style">
        <Carousel v-model="banners" loop autoplay trigger="hover" easing="ease-in-out" :radius-dot="radiusDot">
          <CarouselItem v-for="item in bannerList" :key="item">
            <img :src="item" class="banner-img"/>
          </CarouselItem>
        </Carousel>

        <div class="margin-top-l">
          <Row class="box-list">
            <Col class="left" span="16">
            <h2 class="font-bold-300">
              <span class="font-bold-400">冀文学</span>
              <div class="float-right">
                <Button type="text" size="small">更多>></Button>
              </div>
            </h2>
            <div class="border">
              <Row class="border-bottom">
                <Col span="12" class="border-right padding-m" v-for="i in bookList" :key="i.title">
                <router-link :to="`/jwx/list/${i.id}`">
                  <Col span="10">
                  <img class="book-img" src="https://easyreadfs.nosdn.127.net/B1HhrxgVoxFybU_sXhChTg==/8796093023487071300?imageView&quality=90&thumbnail=114y160" alt="">
                  </Col>
                  <Col class="position-relative" style="height: 160px;">
                  <h4>{{ i.title }}</h4>
                  <span class="author font-s">醉思迁</span>
                  <p class="font-s">{{ i.description }}</p>
                  <Button type="text" size="small" class="position-absolute" style="bottom: 0;right: 0;">点击阅读></Button>
                  </Col>
                </router-link>
                </Col>
              </Row>
            </div>
            </Col>
            <Col class="right" span="7" offset="1">
            <h2 class="font-bold-300">
              <span>大师榜</span>
            </h2>
            <div class="border">
              <ul>
                <li v-for="(item,index) in rankingList"
                    :key="index"
                    class="padding-left-m padding-right-m padding-top padding-bottom"
                    :class="{ 'bg-light': item.active }"
                    @mouseover="hoverRank(item)">
                  <router-link :to="`/jwx/list/${item.id}`">
                    <i class="inline-block margin-right font-l color-red-1 font-bold-400" v-if="item.active">{{ index + 1 }}</i>
                    <span class="inline-block margin-right font-m font-light font-bold-400" v-else>{{ index + 1 }}</span>
                    <img :src="item.imgUrl" class="rank-img inline-block margin-right" v-if="item.active">
                    <div class="inline-block">
                      <h3 class="font-m" v-if="item.active">{{ item.title }}</h3>
                      <span v-else class="font-m">{{ item.title }}</span>
                      <span v-if="item.active">{{ item.author }}</span>
                    </div>
                  </router-link>
                </li>
                <li><Button type="text" size="large" class="font-m">查看更多</Button></li>
              </ul>
            </div>
            </Col>
          </Row>
        </div>

        <div class="margin-top-l">
          <Row class="box-list">
            <Col class="left" span="16">
            <h2 class="font-bold-300">
              <span class="font-bold-400">国士书院</span>
              <div class="float-right">
                <Button type="text" size="small">更多>></Button>
              </div>
            </h2>
            <div class="border">
              <Row class="border-bottom">
                <Col span="12" class="border-right padding-m" v-for="i in bookList" :key="i.title">
                <router-link :to="`/gs/list/${i.id}`">
                  <Col span="10">
                  <img class="book-img" src="https://easyreadfs.nosdn.127.net/B1HhrxgVoxFybU_sXhChTg==/8796093023487071300?imageView&quality=90&thumbnail=114y160" alt="">
                  </Col>
                  <Col class="position-relative" style="height: 160px;">
                  <h4>{{ i.title }}</h4>
                  <span class="author font-s">醉思迁</span>
                  <p class="font-s">{{ i.description }}</p>
                  <Button type="text" size="small" class="position-absolute" style="bottom: 0;right: 0;">点击阅读></Button>
                  </Col>
                </router-link>
                </Col>
              </Row>
            </div>
            </Col>
            <Col class="right" span="7" offset="1">
            <h2 class="font-bold-300">
              <span>名士榜</span>
            </h2>
            <div class="border">
              <ul>
                <li v-for="(item,index) in rankingList"
                    :key="index"
                    class="padding-left-m padding-right-m padding-top padding-bottom"
                    :class="{ 'bg-light': item.active }"
                    @mouseover="hoverRank1(item)">
                  <router-link :to="`/gs/list/${item.id}`">
                    <i class="inline-block margin-right font-l color-red-1 font-bold-400" v-if="item.active">{{ index + 1 }}</i>
                    <span class="inline-block margin-right font-m font-light font-bold-400" v-else>{{ index + 1 }}</span>
                    <img :src="item.imgUrl" class="rank-img inline-block margin-right" v-if="item.active">
                    <div class="inline-block">
                      <h3 class="font-m" v-if="item.active">{{ item.title }}</h3>
                      <span v-else class="font-m">{{ item.title }}</span>
                      <span v-if="item.active">{{ item.author }}</span>
                    </div>
                  </router-link>
                </li>
                <li><Button type="text" size="large" class="font-m">查看更多</Button></li>
              </ul>
            </div>
            </Col>
          </Row>
        </div>

        <div class="margin-top-l">
          <Row class="box-list">
            <Col class="left" span="16">
            <h2 class="font-bold-300">
              <span class="font-bold-400">天香中文</span>
              <div class="float-right">
                <Button type="text" size="small">更多>></Button>
              </div>
            </h2>
            <div class="border">
              <Row class="border-bottom">
                <Col span="12" class="border-right padding-m" v-for="i in bookList" :key="i.title">
                <router-link :to="`/tx/list/${i.id}`">
                  <Col span="10">
                  <img class="book-img" src="https://easyreadfs.nosdn.127.net/B1HhrxgVoxFybU_sXhChTg==/8796093023487071300?imageView&quality=90&thumbnail=114y160" alt="">
                  </Col>
                  <Col class="position-relative" style="height: 160px;">
                  <h4>{{ i.title }}</h4>
                  <span class="author font-s">醉思迁</span>
                  <p class="font-s">{{ i.description }}</p>
                  <Button type="text" size="small" class="position-absolute" style="bottom: 0;right: 0;">点击阅读></Button>
                  </Col>
                </router-link>
                </Col>
              </Row>
            </div>
            </Col>
            <Col class="right" span="7" offset="1">
            <h2 class="font-bold-300">
              <span>国色榜</span>
            </h2>
            <div class="border">
              <ul>
                <li v-for="(item,index) in rankingList"
                    :key="index"
                    class="padding-left-m padding-right-m padding-top padding-bottom"
                    :class="{ 'bg-light': item.active }"
                    @mouseover="hoverRank2(item)">
                  <router-link :to="`/tx/list/${item.id}`">
                    <i class="inline-block margin-right font-l color-red-1 font-bold-400" v-if="item.active">{{ index + 1 }}</i>
                    <span class="inline-block margin-right font-m font-light font-bold-400" v-else>{{ index + 1 }}</span>
                    <img :src="item.imgUrl" class="rank-img inline-block margin-right" v-if="item.active">
                    <div class="inline-block">
                      <h3 class="font-m" v-if="item.active">{{ item.title }}</h3>
                      <span v-else class="font-m">{{ item.title }}</span>
                      <span v-if="item.active">{{ item.author }}</span>
                    </div>
                  </router-link>
                </li>
                <li><Button type="text" size="large" class="font-m">查看更多</Button></li>
              </ul>
            </div>
            </Col>
          </Row>
        </div>
      </div>
    </div>

    <!--移动端-->
    <div class="m-style bg-gray-1">
      <mt-swipe :show-indicators="false">
        <mt-swipe-item v-for="item in bannerList" :key="item">
          <img :src="item" alt="" class="m-banner">
        </mt-swipe-item>
      </mt-swipe>

      <div class="margin-top-m border-top padding-left-m padding-right-m bg-white">
        <mt-cell class="cell-title" title="冀文学">
          <span class="color-primary cursor-pointer">more</span>
        </mt-cell>
        <mt-cell class="border-bottom padding-bottom" :to="`/jwx/list/${bookList[0].id}`">
          <div slot="title">
            <img src="https://easyreadfs.nosdn.127.net/B1HhrxgVoxFybU_sXhChTg==/8796093023487071300?imageView&quality=90&thumbnail=114y160" class="first-img">
            <div class="float-left margin-left">
              <h3 class="font-bold-400">{{ bookList.length > 0 ? bookList[0].title : '' }}</h3>
              <span class="font-s">帅哥作者</span>
              <!--<span>{{ bookList[0].author }}</span>-->
              <p class="margin-top-m">{{ bookList.length > 0 ? bookList[0].description : '' }}</p>
            </div>
          </div>
        </mt-cell>
        <mt-cell v-for="(item,index) in bookList"
                 :key="item.id"
                 :title="item.title"
                 :label="item.description"
                 class="border-bottom content"
                 :to="`/jwx/list/${item.id}`"
                 v-if="index > 0"></mt-cell>
      </div>

      <div class="margin-top-m border-top padding-left-m padding-right-m bg-white">
        <mt-cell class="cell-title" title="国士书院" :to="`/gs/list/${bookList[0].id}`">
          <span class="color-primary cursor-pointer">more</span>
        </mt-cell>
        <mt-cell class="border-bottom padding-bottom">
          <div slot="title">
            <img src="https://easyreadfs.nosdn.127.net/B1HhrxgVoxFybU_sXhChTg==/8796093023487071300?imageView&quality=90&thumbnail=114y160" class="first-img">
            <div class="float-left margin-left">
              <h3 class="font-bold-400">{{ bookList[0].title }}</h3>
              <span class="font-s">帅哥作者</span>
              <!--<span>{{ bookList[0].author }}</span>-->
              <p class="margin-top-m">{{ bookList[0].description }}</p>
            </div>
          </div>
        </mt-cell>
        <mt-cell v-for="(item,index) in bookList"
                 :key="item.id"
                 :title="item.title"
                 :label="item.description"
                 class="border-bottom content"
                 :to="`/jwx/list/${item.id}`"
                 v-if="index > 0"></mt-cell>
      </div>

      <div class="margin-top-m border-top padding-left-m padding-right-m bg-white">
        <mt-cell class="cell-title" title="天香中文">
          <span class="color-primary cursor-pointer">more</span>
        </mt-cell>
        <mt-cell class="border-bottom padding-bottom" :to="`/tx/list/${bookList[0].id}`">
          <div slot="title">
            <img src="https://easyreadfs.nosdn.127.net/B1HhrxgVoxFybU_sXhChTg==/8796093023487071300?imageView&quality=90&thumbnail=114y160" class="first-img">
            <div class="float-left margin-left">
              <h3 class="font-bold-400">{{ bookList[0].title }}</h3>
              <span class="font-s">帅哥作者</span>
              <!--<span>{{ bookList[0].author }}</span>-->
              <p class="margin-top-m">{{ bookList[0].description }}</p>
            </div>
          </div>
        </mt-cell>
        <mt-cell v-for="(item,index) in bookList"
                 :key="item.id"
                 :title="item.title"
                 :label="item.description"
                 class="border-bottom content"
                 :to="`/jwx/list/${item.id}`"
                 v-if="index > 0"></mt-cell>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import banner1 from '@/assets/images/index/banner1.jpg'
  import banner2 from '@/assets/images/index/banner2.jpg'

  export default {
    name: '',
    data () {
      return {
        search: '',
        tabVal: 'index',
        tabList: [
          { label: '首页',value: 'index' },
          { label: '冀文学',value: 'jwx' },
          { label: '国士书院',value: 'gs' },
          { label: '天香中文',value: 'tx' }
        ],
        sidebarList: [
          {
            name: '国风中文网',
            value: 'gf',
            menuList: [
              { name: '都市生活',value: 'ds' },
              { name: '官场职场',value: 'gc' }
            ]
          },
          {
            name: '采薇书院',
            value: 'cw',
            menuList: [
              { name: '浪漫青春',value: 'lm' },
              { name: '穿越架空',value: 'cy' }
            ]
          }
        ],
        banners: 0,
        bannerList: [
          banner2,
          banner1
        ],
        radiusDot: true,
        bookList: [],
        rankingList: [],
        username: '',
        isLogin: true
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        this.$http.get('/api/book/listBook',{
          categoryId: 1,
          pageNum: 1,
          pageSize: 4
        })
          .then((res) => {
            if (res) {
              this.bookList = res.result.list
              this.rankingList = res.result.list
              this.rankingList1 = res.result.list
              this.rankingList2 = res.result.list
            }
          })
      },
      changeTab(data){
        this.$router.push(`/${data.value}`)
      },
      hoverRank (data) {
        this.rankingList.forEach((value) => {
          value.active = false
        })
        data.active = true
      },
      hoverRank1 (data) {
        this.rankingList1.forEach((value) => {
          value.active = false
        })
        this.rankingList2.forEach((value) => {
          value.active = false
        })
        data.active = true
      },
      hoverRank2 (data) {
        this.rankingList2.forEach((value) => {
          value.active = false
        })
        data.active = true
      },
      // 刷新本页面
      reload () {
        this.$router.go(0)
      }
    }
  }
</script>
